import React from 'react'
import { Button, Space, Switch, Table, Tag, Popconfirm } from 'antd'
// import dayjs from 'dayjs'
//页面中table表格要求单独封装组件，使用传值方式完成渲染
function TableList({
    list,
    loading,
    total = 0,
    pageSize = 10,
    page = 1,
    onChange = () => {},
    isEdit,
    editBtnFN,
    isDel,
    delFn,
}) {

    const columns = [
        { title: 'ID', dataIndex: 'id' },
        { title: '姓名', dataIndex: 'name' },
        {
            title: '职位',
            dataIndex: 'job',
            render(_, record) {
                const colors = { 销售员: 'green', 总经理: 'blue', 销售助理: 'red', }
                return <Tag color={colors[record.job]}>{record.job}</Tag>
            },
        },
        { title: '排序', dataIndex: 'person_num' },
        
        {
            title: '状态',
            dataIndex: 'status',
            render(_, record) {
                return <Switch checked={record.status === 1} />
            },
        },
        {
            title: '操作',
            render(_, record) {
                return (
                    <Space>
                        {isEdit && (<Button onClick={() => {editBtnFN(record)}}>编辑</Button>)}
                        {isDel && (<Button onClick={() => {delFn(record)}}>删除</Button>)}
                    </Space>
                )
            },
        },
    ]
    return (
        <div>
            <Table
                rowKey={'id'}
                dataSource={list}
                columns={columns}
                loading={loading}
                pagination={{
                    total: total,
                    pageSize: pageSize,
                    current: page,
                    onChange: onChange,
                    showQuickJumper: true,
                    showSizeChanger: true,
                }}
            />
        </div>
    )
}

export default React.memo(TableList)